$border_color: #0059B2;
$header_height: 160px;
$header_item_height: 66px;
$legend_height: 80px;
$right_box_width: 300px;
$cell_size: 16px;
$table_header_bg_color: #114896;
.current-time {
	font-size: 22px;
	margin-right: 10px;
}
.spc-container {
	width: 100%;
	height: 100%;
	color: #fff;
	background: url("../../../../../assets/images/technologyMonitor/jk2.jpg") no-repeat center;
	background-size: cover;
	padding: 10px;
	box-sizing: border-box;
	.header-box {
		height: $header_height;
		display: flex;
		.header-box-name {
			font-size: 16px;
		}
		.header-box-val {
			font-size: 22px;
		}
		.header-first-box {
			width: 240px;
			height: $header_item_height;
			border-radius: 8px;
			display: flex;
			background: $table_header_bg_color;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-bottom: 10px;
		}
		.header-second-box {
			display: flex;
			margin-bottom: 10px;
			.header-second-box-item {
				width: 160px;
				height: $header_item_height;
				background: $table_header_bg_color;
				border-radius: 8px;
				margin: 0 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}
	}
	.machine-list-box {
		width: 100%;
		height: calc(100% - #{$header_height} - 20px);
		border: solid 1px $border_color;
		font-size: 14px;
		display: flex;
		overflow: hidden;
		.table-head-box {
			width: 220px;
			height: 100%;
			display: flex;
			flex-direction: column;
			border-right: solid 1px $border_color;
			background: #103679;
			overflow: auto;
			.header-item {
				height: 42px;
				border-bottom: solid 1px $border_color;
				display: flex;
				justify-content: center;
				flex-shrink: 0;
				font-size: $cell_size;
			}
		}
		.table-head-box .header-item:first-child {
			background: #103679;
		}
		// 滚动条样式
		.table-head-box::-webkit-scrollbar{
			width: 0px;
			height: 1px;
		}
		.table-head-box::-webkit-scrollbar-thumb:hover{
			width: 0px;
			height: 1px;
			cursor: pointer;
			background-color: #114896;
		}
		.table-head-box::-webkit-scrollbar-thumb{
			border-radius: 1em;
			background-color: #1A2F68;
		}
		.table-head-box::-webkit-scrollbar-track{
			border-radius: 1em;
			background-color: rgba(50,50,50,.1);
		}
		.table-body-box {
			width: calc(100% - 100px);
			height: 100%;
			display: flex;
			overflow: auto;
			.machine-item {
				width: 300px;
				height: 100%!important;
				border-right: solid 1px $border_color;
				flex-shrink: 0;
				.machine-item-col {
					height: 42px;
					padding: 4px;
					overflow: hidden;
					box-sizing: border-box;
					border-bottom: solid 1px $border_color;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: $cell_size;
					.machine-state-bar {
						width: 30px;height: 16px;border-radius: 4px;margin-right: 4px;
					}

				}
			}
			.machine-item .machine-item-col:first-child {
				background: $table_header_bg_color;
			}

		}
		// 滚动条样式
		.table-body-box::-webkit-scrollbar{
			width: 6px;
			height: 7px;
		}
		.table-body-box::-webkit-scrollbar-thumb:hover{
			width: 6px;
			height: 7px;
			cursor: pointer;
			background-color: #114896;
		}
		.table-body-box::-webkit-scrollbar-thumb{
			border-radius: 1em;
			background-color: #1A2F68;
		}
		.table-body-box::-webkit-scrollbar-track{
			border-radius: 1em;
			background-color: rgba(50,50,50,.1);
		}
	}

}
.machine-ani {
	animation: aniName 1.5s infinite linear;
}
@keyframes aniName {
	0% {
		color: rgba(255,255,255, 1);
		opacity: 1;
	}
	50% {
		color: rgba(255,255,255, .5);
		opacity: .5;
	}
	100% {
		color: rgba(255,255,255, 1);
		opacity: 1;
	}
}
